<template>
  <div class="Visitor">
    <el-row>
      <el-col :span="2">
        <el-button type="primary" size="small" @click="exportInfo">导出</el-button>
      </el-col>
      <el-col :span="22" class="text-right" >
        <!-- 查询 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
          <el-form-item label="访客姓名">
            <el-input v-model="searchForm.visitor_name" placeholder="访客姓名" class="width-120"></el-input>
          </el-form-item>
          <el-form-item label="来访时间">
            <el-date-picker
              v-model="searchForm.visitorTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="选择日期"
              end-placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%;"
      align="center"
      class="loading-area">
      <el-table-column
        prop="Username"
        label="姓名"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Count"
        label="来访人数"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Mobile"
        label="联系方式"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Reason"
        label="来访事由"
        align="center"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="ArriveTime"
        label="来访时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="EndTime"
        label="结束时间"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Photo"
        label="抓拍照片"
        align="center"
        class="imgPopover">
        <template slot-scope="scope">
          <el-popover
            v-if="scope.row.photo"
            placement="left-start"
            trigger="hover">
            <img :src="scope.row.photo" alt="">
            <el-button slot="reference" @click="openImg(scope.row.Photo)" type="text" class="limit-word">{{scope.row.Photo}}</el-button>
          </el-popover>
          <el-button v-else type="text">---</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        >
        <template slot-scope="scope">
          <span :class="'state' + scope.row.State">{{stateTagType(scope.row.State)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="operation"
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button @click="reason(scope.row)" type="text" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分頁  -->
    <el-pagination
      ref="pagination"
      background
      @current-change="handleCurrentChange"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total"
      hide-on-single-page>
    </el-pagination>
    <!--  详情弹窗  -->
    <el-dialog
      title="访客详情"
      :visible.sync="dialogVisible"
      width="440px"
      class="detail-dialog">
      <div class="detail-box">
        <p>姓名：{{detailData.Username}}</p>
        <p>身份证：{{detailData.IdCard}}</p>
        <p>来访人数：{{detailData.Count}}</p>
        <p>来访事由：{{detailData.Reason}}</p>
        <p>来访单位：{{detailData.VisitUnit}}</p>
        <p>联系方式：{{detailData.Mobile}}</p>
        <p>来访时间：{{detailData.ArriveTime}}</p>
        <p>结束时间：{{detailData.EndTime}}</p>
        <el-divider></el-divider>
        <p>审批人：{{detailData.approval_name}}</p>
        <p>审批时间：{{detailData.ApprovalTime}}</p>
        <p>审批状态：{{detailData.State}}</p>
        <p>审批意见：{{detailData.ApprovalAdvice}}</p>
      </div>
    </el-dialog>
    <!--  图片预览  -->
    <el-dialog width="400px" :visible.sync="imgVisible" class="img-dialog">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="dialogImgUrl" width="100%" height="100%">
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Visitor',
  data () {
    return {
      paginationBoxReflow: true,
      activeName: 'visitor', // 当前tab
      manager: '', // 本模块管理员
      searchForm: { // 表单查询数据
        visitor_name: '', // 来访人姓名
        visitorTime: ['', ''] // 来访时间
      },
      limit: 9, // 每页条数
      page: 1, // 默认在第一页
      total: null, // 总条数
      tableData: [], // 表格数据
      loading: true, // 加载效果
      detailData: [], // 详情弹窗数据
      dialogVisible: false, // 详情弹窗可见状态
      imgVisible: false, // 图片预览弹窗可见状态
      dialogImgUrl: '' // 图片预览弹窗内图片链接
    }
  },
  methods: {
    // tab切换
    handleClick (tab, event) {
      this.$router.push({ path: this.activeName });
    },
    // 获取访客记录
    init () {
      var data = this.searchForm;
      var startTime = data.visitorTime[0] === '' ? '' : this.$moment(data.visitorTime[0]).format('YYYY-MM-DD hh:mm:ss');
      var endTime = data.visitorTime[1] === '' ? '' : this.$moment(data.visitorTime[1]).format('YYYY-MM-DD hh:mm:ss');
      let param = {
        visitor_name: data.visitor_name,
        start_time: startTime,
        end_time: endTime,
        page: this.page,
        limit: this.limit
      };
      this.$api.getVisitorList(param).then(res => {
        const loading = this.$loading({
          text: '正在加载',
          lock: true,
          target: document.querySelector('.loading-area')
        });
        this.tableData = res.data;
        this.total = res.count;
        loading.close();
      })
    },
    // 查询
    onSubmit () {
      this.$refs.pagination.internalCurrentPage = 1;
      this.$refs.pagination.lastEmittedPage = 1;
      this.init();
    },
    // 展示图片
    openImg (url) {
      if (url) {
        this.imgVisible = true;
        this.dialogImgUrl = url
      }
    },
    // 状态颜色
    stateTagType (type) {
      if (type === -1) {
        return '待审核'
      } else if (type === 1) {
        return '已驳回'
      } else if (type === 2) {
        return '进行中'
      } else if (type === 3) {
        return '已结束'
      }
    },
    // 查看详情
    reason (info) {
      let param = {
        id: info.id
      };
      this.dialogVisible = true
      this.$api.getVisitorDetail(param).then(res => {
        this.detailData = res.VisitorDetail
      })
    },
    // 翻页
    handleCurrentChange (page) {
      this.page = page;
      this.init()
    },
    // 导出
    exportInfo () {
      var data = this.searchForm;
      var startTime = data.visitorTime[0] === '' ? '' : this.$moment(data.visitorTime[0]).format('YYYY-MM-DD hh:mm:ss');
      var endTime = data.visitorTime[1] === '' ? '' : this.$moment(data.visitorTime[1]).format('YYYY-MM-DD hh:mm:ss');
      let param = {
        visitor_name: data.visitor_name,
        start_time: startTime,
        end_time: endTime,
        organization_id: 22
      };
      this.$api.exportVisitor(param).then(res => {
        if (res.successful) {
          window.open(res.file_name)
        } else {
          this.$message.error('导出失败');
        }
      })
    }
  },
  created () {
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="scss">
  .Visitor {
    .detail-dialog {
      .el-dialog {
        .el-dialog__header {
          background-color: #f6fffc !important;
          border-bottom: 2px solid #a7e0cb !important;
        }

        .detail-box {
          margin: 0 30px 20px 30px;

          .el-divider--horizontal {
            margin: 12px 0;
          }

          p {
            line-height: 25px;
          }
        }
      }
    }

    .img-dialog {
      .el-dialog__header {
        padding: 0 !important;
      }
    }
  }

  .state-1,
  .state1 {
    color: #f56c6c;
  }

  .state2 {
    color: #67c23a;
  }

  .state3 {
    color: #909399;
  }

</style>
<style scoped lang="scss">

</style>
